<template>
  <div style="padding-left: 10px">
    <h1>角色管理</h1>
    <div style="padding-right: 2000px;padding-top: 20px">
      <el-button @click="addRole" type="primary">新增</el-button>
    </div>
    <el-table
        :data="tableData"
        style="width: 100%">
      <el-table-column
          prop="id"
          label="ID"
          width="80">
      </el-table-column>
      <el-table-column
          prop="name"
          label="角色名称"
          width="180">
      </el-table-column>
      <el-table-column
          prop="zf"
          label="权限字符"
          width="80">
      </el-table-column>
      <el-table-column
          prop="orders"
          label="显示顺序"
          width="80">
      </el-table-column>
      <el-table-column
          prop="createTime"
          label="创建时间"
          width="200">
      </el-table-column>
      <el-table-column v-slot="scope">
          <el-button
              size="mini"
              type="primary"
              @click="openUpdateRole(scope.row)">编辑</el-button>
          <el-button
              size="mini"
              type="danger"
              @click="delRoleById(scope.row.id)">删除</el-button>
      </el-table-column>
    </el-table>

    <div>
    <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="角色名称" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="权限字符" :label-width="formLabelWidth">
          <el-input v-model="form.zf" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="显示顺序" :label-width="formLabelWidth">
          <el-input v-model="form.orders" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="菜单权限" :label-width="formLabelWidth">
          <div class="block">
            <el-cascader
                :options="options"
                :props="props"
                v-model="menus"
                collapse-tags
                clearable></el-cascader>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="add">确 定</el-button>
      </div>
    </el-dialog>

  </div>
  </div>
</template>

<script>
export default {
  name: "RoleView",
  data(){
    return{
      options:[],
      props: { multiple: true,value:'id',label:'name' },
      tableData:[],
      dialogFormVisible:false,
      form:{
        menuIds:[]
      },
      formLabelWidth:'120px',
      menus:[]
    }
  },methods:{
    // 软删除 删除角色
    delRoleById(id){
      //alert(id)
      this.axios.post("http://172.20.10.5:8003/api/tb-role/delRoleById?id="+id).then(res=>{
        if(res.data=='success'){
          this.$message.success("删除成功！！！！");
          this.roleList();
        }
      })
    },
    // 打开角色修改的嵌套表单
    openUpdateRole(row){
      this.form={}
      this.menus=[]
      this.dialogFormVisible=true;
      //将这一行的数据赋值给form
      this.form=row;
      this.menuListByRoleId(row.id)
      //console.log("pppp==="+JSON.stringify(this.form))
    },
    /**
     * 根据角色的id去查询关联的菜单id
     */
    menuListByRoleId(id){
      this.axios.post("http://172.20.10.5:8003/api/tb-role/menuListByRoleId?roleId="+id).then(res=>{
        console.log(res.data)
        let roleMenus=res.data
        if(roleMenus){
          roleMenus.forEach(item=>{
            this.menus=this.menus+","+parseInt(item.menuId)
          })
        }
        this.menus=this.menus.substring(1,this.menus.length)
        //alert(this.menus)
      })
    },
    /**
     * 角色列表方法
     */
    roleList(){
      this.axios.post("http://172.20.10.5:8003/api/tb-role/roleList").then(res=>{
        console.log(res.data)
        this.tableData=res.data;
      })
    },addRole(){
        this.form={}
        this.dialogFormVisible=true
    },menuList(){
      this.axios.post("http://172.20.10.5:8003/api/tb-menu/menuList").then(res=>{
        this.options=res.data
      })
    },add(){
      this.form.menuIds=this.menus.toString();
      console.log(this.form.menuIds)
      this.axios.post("http://172.20.10.5:8003/api/tb-role/addRole",this.form).then(res=>{
        if(res.data=='success'){
          this.$message.success("添加成功！！！！");
          this.roleList();
          this.dialogFormVisible=false
        }
      })
    }
  },created() {
    this.roleList();
    this.menuList();
  }
}
</script>

<style scoped>

</style>